<template>
    <view class="bg-white goods-recommend rounded-[14rpx] m-[20rpx]">
        <view class="goods-recommend-title flex">
            <view class="w-[44rpx] h-[44rpx]">
                <image class="w-full h-full" src="@/static/images/goods/icon_recommend.png" />
            </view>
            <text class="ml-[20rpx] text-main">猜你喜欢</text>
        </view>

        <scroll-view
            class="whitespace-nowrap"
            :scroll-x="true"
            :enhanced="true"
            :show-scrollbar="false"
            :enable-passive="true"
            :scroll-with-animation="false"
        >
            <view
                class="inline-block p-[20rpx]"
                v-for="item in (content || [])" :key="item?.id || Math.random()"
                @click.stop="goPage(`/pages/goods_detail/goods_detail?id=${item?.id || ''}`)"
            >
                <goods-card
                    shape="square"
                    class="flex-1"
                    :image="item.image"
                    :price="item.price"
                    :minPrice="item.lineationPrice"
                    :imageStyle="{ width: '240rpx', height: '240rpx' }"
                    :containStyle="{ width: '240rpx', height: 'auto', 'border-radius': '0' }"
                >
                    <template #name>
                        <view class="text-lg text-[#333] truncate">
                            {{ item.name }}
                        </view>
                    </template>
                </goods-card>
            </view>
        </scroll-view>
    </view>
</template>

<script lang="ts" setup>
import { useRouter } from 'uniapp-router-next'
const router = useRouter()
const props = defineProps({
    content: {
        type: Array,
        default: () => []
    }
})

const goPage = (url: string) => {
    try {
        console.log(url)
        router.navigateTo(url)
    } catch (error) {
        console.log('goodsrecom 路由跳转失败', error)
        // 降级使用 uni.navigateTo
        try {
            uni.navigateTo({ url })
        } catch (e) {
            console.log('uni.navigateTo 也失败', e)
        }
    }
}
</script>

<style lang="scss" scoped>
.goods-recommend {
    &-title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 34rpx;
        padding: 30rpx 0 10rpx 0;
        text-align: center;

        &::before {
            content: '';
            display: inline-block;
            width: 80rpx;
            height: 1px;
            margin: 0 20rpx;
            background: #dcdfe6;
        }

        &::after {
            content: '';
            display: inline-block;
            width: 80rpx;
            height: 1px;
            margin: 0 20rpx;
            background: #dcdfe6;
        }
    }
}
</style>